<template>
    <el-dialog @close="close " v-model="dialogFormVisible" :title="title">
        <el-form ref="dialogForm" :model="dialogFormData">
            <el-form-item>
                <slot name="upload"></slot>
            </el-form-item>
            <el-form-item v-for="(v,k) in dialogFormData" :key="k"   :label="v.label" :label-width="formLabelWidth" :prop="(k+'.value')"
               :rules="{
                required:true,
                trigger:'blur',
                message:v.label +'不能为空'
               }">
              
                <el-input v-model="v.value" autocomplete="off" />
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="confirm(dialogForm)" type="primary">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import {ref ,watchEffect,toRefs} from "vue"
let props =defineProps({
    // dialog标题
    title:{
        type:String,
        default(){
            return "添加学员信息"
        }
    },

    // 控制表单得显示和隐藏的
    visible:{
        type:Boolean,
        default(){
            return false
        }
    },
    // 控制表单的校验的
    rules:{
        type:Array,
        default(){
            return []
        }
    },
    // 弹窗表单中的数据来源
    dialogFormData:{
        type:Object,
        default(){
            return {}
        }
    },
    formLabelWidth:{
        type:String,
        default(){
            return "140px"
        }
    }
})


// 声明表单校验通过之后的回调
let emits =defineEmits(['validateSuccess','dialogCancel','closed'])

// console.log(props.visible)
let dialogFormVisible=ref(false)
// 使用watchEffect来侦听props 的visible的变化，来控制dialog的显示和隐藏

let {visible}=toRefs(props)
watchEffect(()=>{
    // console.log(visible.value)
    dialogFormVisible.value=visible.value
})





// 点击取消
let cancel =()=>{
   
    emits('dialogCancel')
}
// 点击确定
// 声明一个ref引用dialog结构
let dialogForm=ref()
let confirm=(form)=>{
    form.validate(valid=>{
        if(valid){
            // 表单校验通过
            emits('validateSuccess',dialogForm)
        }else{
            //表单校验不通过
        }
    })

}

// dialog被关闭的时候触发的事件
let close=()=>{
    emits('closed')
}

</script>